<template>
<div class="leo-window-frame">
    <DxCollapse ref="collapse" @changeExpandIndex="changeExpandIndex" @changeActiveIndex="changeActiveIndex" @changeChildActiveIndex="changeChildActiveIndex" :defaultExpandIndex='defaultExpandIndex' :defaultActiveIndex='defaultActiveIndex' :defaultChildActiveIndex='defaultChildActiveIndex' @selectTab="selectTab" :tabs="systemTabs"></DxCollapse>
</div>
</template>

<script lang="ts">
import {
    Options,
    Vue
} from 'vue-class-component';

import {
    ITabItem,
    FuncObj
} from '../api/types';
import {
    RefElement
} from 'element-plus/lib/el-popper/src/use-popper';

import {
    generateTabs
} from '../api/mock';

@Options({
    components: {
    }
})
export default class extends Vue {
    tabs!: Array < FuncObj > ;
    systemTabs: Array < FuncObj > = [];
    clickTab!: FuncObj;
    defaultExpandIndex: number = 0;
    defaultActiveIndex: number = 0;
    defaultChildActiveIndex: number = 0;

    created() {
        this.tabs = generateTabs();
        this.systemTabs = this.tabs[0].children;
        this.clickTab = this.systemTabs[0].children[0];
    }

    /**
     * 选中模块
     */
    selectModule(index: number, func: FuncObj) {
        console.log('selectModule == ', func);
        this.systemTabs = func.children;
        this.clickTab = this.systemTabs[0].children[0];
        // this.defaultExpandIndex = 0;
        // this.defaultActiveIndex = 0;
        // this.defaultChildActiveIndex = 0;
        const collapseRef: RefElement = this.$refs.collapse;
        collapseRef.initParams();
    }

    /**
     * 选中功能菜单
     */
    selectTab(child: FuncObj, cj: number, tab: FuncObj, ci: number) {
        console.log('child == ', child, child.belongSystem, this.clickTab.belongSystem);
        
    }

    mounted() {}

    /**
     * 鼠标按下事件
     */
    mouseDownAction(event: MouseEvent) {

    }

    /**
     * 鼠标抬起事件
     */
    mouseUpAction(event: MouseEvent) {

    }

    changeExpandIndex(expandIndex: number) {
        if (this.defaultExpandIndex == expandIndex) {
            return;
        }
        this.defaultExpandIndex = expandIndex;
    }

    changeActiveIndex(activeIndex: number) {
        if (this.defaultActiveIndex == activeIndex) {
            return;
        }
        this.defaultExpandIndex = activeIndex;
    }

    changeChildActiveIndex(childActiveIndex: number) {
        if (this.defaultChildActiveIndex == childActiveIndex) {
            return;
        }
        this.defaultChildActiveIndex = childActiveIndex;
    }

}
</script>

<style lang="scss" scoped>
.leo-window-frame {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;

    .leo-window-frame-bar {
        position: relative;
    }

    .leo-window-frame-workspace {
        box-sizing: border-box;
        display: flex;
        display: -webkit-flex;
        width: 100%;
        height: calc(100% - 80px);
        position: absolute;
        top: 80px;
        flex-flow: row;

        .leo-window-frame-center {
            flex: 1;
            width: 0;
            background: #f1f2f7;

            .leo-window-frame-center-iframe {
                display: block;
                width: 100%;
                height: 100%;
                border: none;
            }
        }
    }

}
</style>
